<template>
	<view>
		<view class="tabbar">
			<image class="image-bg" src="../../static/img/bg.png" mode=""></image>
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in list"
					:key="index"
					@tap="handleActive(index)"
				>
					<view class="image" v-if="index != 2">
						<image
							class="icon"
							v-if="isPages !== index"
							:src="item.iconPath"
							mode=""
						></image>
						<image
							class="icon"
							v-else
							:src="item.selectedIconPath"
							mode=""
						></image>
						<view class="text">
							<text class="text-text">{{ item.text }}</text>
						</view>
					</view>
					<view class="image scan" v-else>
						<image
							class="icon"
							v-if="isPages !== index"
							:src="item.iconPath"
							mode=""
						></image>
						<image
							class="icon"
							v-else
							:src="item.selectedIconPath"
							mode=""
						></image>
						<view class="text">
							<text class="text-text">{{ item.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			badge: {
				type: Number,
				default: 0,
			},
			isPages: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				list: [
					{
						iconPath: "/static/tabs/home.png",
						selectedIconPath: "/static/tabs/homeed.png",
						text: "首页",
						pagePath: "/pages/tabs/details",
					},
					{},
					// {
					// 	iconPath: "/static/tabs/stand.png",
					// 	selectedIconPath: "/static/tabs/standed.png",
					// 	text: "电站",
					// 	pagePath: "/pages/tabs/map",
					// },
					{
						iconPath: "/static/tabs/mid.png",
						selectedIconPath: "/static/tabs/mid.png",
						text: "扫码",
					},
					{},
					// {
					// 	iconPath: "/static/tabs/order.png",
					// 	selectedIconPath: "/static/tabs/ordered.png",
					// 	text: "订单",
					// 	pagePath: "/pages/tabs/order",
					// },
					{
						iconPath: "/static/tabs/my.png",
						selectedIconPath: "/static/tabs/myed.png",
						text: "我的",
						pagePath: "/pages/tabs/me",
					},
				],
			};
		},
		methods: {
			handleActive(index) {
				console.log(index);
				// #ifdef APP-PLUS
				//init
				// if(index == 1) return this.switchTab('/pages/tabs/nmap',{login:true});
				// #endif
				// if(index == 1 || index == 3) return this.switchTab(this.list[index].pagePath,{login:true});
				// if(index == 2) return this.navTo("/pages/tabs/scan",{login:true});
				// this.switchTab(this.list[index].pagePath)
				//alter
				if (index == 1) {
					uni.showToast({
						title: "该功能暂不可用",
						icon: "none",
						duration: 1500,
					});
					return;
				}
				if (index == 3)
					return this.switchTab(this.list[index].pagePath, { login: true });
				if (index == 2) return this.navTo("/pages/tabs/scan", { login: true });
				if (index != 1) this.switchTab(this.list[index].pagePath);
			},
		},
	};
</script>

<style scoped>
	/* .fixed{
		width: 750rpx;
		height: 120rpx;
		background-color: #fff;
	} */
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		/* height: 230rpx; */
		z-index: 9999 !important;
		/* background-color: #fff; */
	}
	.image-bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 120rpx;
	}
	.list {
		/* height: 230rpx; */
		display: flex;
		align-items: flex-end;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 40rpx;
		z-index: 99 !important;
		position: relative;
	}
	.item {
		/* position: relative; */
		z-index: 99;
		width: 112rpx;
		margin-bottom: 20rpx;
	}
	.image {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.image .icon {
		width: 50rpx;
		height: 50rpx;
	}
	.text .text-text {
		font-size: 26rpx;
		font-weight: bold;
		color: #c2c5cc;
	}

	.scan .icon {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 28rpx;
	}
</style>
